<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        
        <Father @hide='hade'></Father>
     
    </div>

    <template id="father">
        <div>
        <button v-for="item in list" @click="cc">有本事打{{item.name}}</button>
        </div>
    </template>


    <script>
        Vue.component('Father',{
            template:'#father',
            data(){
                return{
                    list:[
                        {id:1,name:'张7'},
                        {id:2,name:'张2'},
                        {id:3,name:'张5'},
                        {id:4,name:'张3'}
                    ]
                }
            },
            methods:{
                 cc:function(list){
                     //console.log(list)
                     this.$emit('hide',list)
                 }
            }
        })

        var vm=new Vue({
           el:'#app',

           data:{},
           methods:{
               hade:function(list){
                   console.log(list)
               }
           }
        });
    </script>
</body>

</html>